<template>
	<view class="page">
		<view class="overview">
			<view class="collectionPayments">
				<view class="num">
					<span></span>
					<text>总应还款</text>
				</view>
				<view class="icon-box">
					<image src="/static/image/icon-hk.png" mode=""></image>
				</view>
				<view class="quantity">
					<view class="">
						10000
					</view>
					<i class="unit">(元)</i>
				</view>
			</view>
			<view class="repayment">
				<view class="num">
					<span></span>
					<text>总应收款</text>
				</view>
				<view class="icon-box">
					<image src="/static/image/icon-sk.png" mode=""></image>
				</view>
				<view class="quantity">
					<view class="">
						40000
					</view>
					<i class="unit">(元)</i>
				</view>
			</view>
		</view>
		<view class="search-box">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear" textColor="#000" placeholder="搜索标题/签约人姓名/关键字">
			</uni-search-bar>
		</view>
		<view class="nav-card">
			<uni-segmented-control class="nav-bar" :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
			<view class="content">
				<template v-if="current === 0">
					<view class="content-item" v-for="(item, index) in promissoryList" :key="index">
						<view class="both-parties-to-contract">
							<view class="me">
								<view class="name">
									{{item.lender}}
								</view>
								<view class="statu" :class="{'status-act': item.lenderStatus==='1'}">
									{{item.lenderStatusName}}
								</view>
							</view>
							<view class="status">
								<view class="matter">
									出借：<span class="money">{{item.loanAmount}}元</span> 给
								</view>
								<view class="arrow">
								</view>
								<view class="state" :class="{'state-act': item.status==='1'}">
									{{item.statusName}}
									<i v-if="item.status === '1'">(距离还款日还剩{{item.remainingDaysForRepayment}}天)</i>
								</view>
							</view>
							<view class="you">
								<view class="name">
									{{item.payee}}
								</view>
								<view class="statu" :class="{'status-act': item.payeeStatus==='1'}">
									{{item.payeeStatusName}}
								</view>
							</view>
						</view>
						<view class="mode-time">
							<view class="mode">
								<span>支付方式</span>
								<span>{{item.paymentMethod}}</span>
							</view>
							<view class="start-time">
								<span>发起时间</span>
								<span>{{item.startTime}}</span>
							</view>
							<view class="borrowing-time">
								<span>借款时间</span>
								<span>{{item.loanDuration}}</span>
							</view>
						</view>
						<view class="detail-btn">
							<button type="default" size="mini" @click="handleDetail">查看详情</button>
						</view>
					</view>
				</template>
				<template v-if="current === 1">
					<text>签署中</text>
				</template>
				<template v-if="current === 2">
					<text>履约中</text>
				</template>
				<template v-if="current === 3">
					<text>已结清</text>
				</template>
				<template v-if="current === 4">
					<text>已作废</text>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				items: ['全部借条', '签署中', '履约中', '已结清', '已作废'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',
				promissoryList: [{
					lender: "小明",
					loanAmount: 10000,
					lenderStatus: "0",
					lenderStatusName: "未签署",
					status: "0",
					statusName: "待您签署",
					payee: "王华",
					payeeStatus: "1",
					payeeStatusName: "已签署",
					paymentMethod: "其他方式",
					startTime: "2024-07-31",
					loanDuration: "2024-07-31 至 2024-08-12",
					remainingDaysForRepayment: "2" //还款剩余天数
				}, {
					lender: "小明",
					loanAmount: 40000,
					lenderStatus: "1",
					lenderStatusName: "已签署",
					status: "1",
					statusName: "签署完成(履约中)",
					payee: "王华",
					payeeStatus: "1",
					payeeStatusName: "已签署",
					paymentMethod: "其他方式",
					startTime: "2024-07-31",
					loanDuration: "2024-07-31 至 2024-08-12",
					remainingDaysForRepayment: "2" //还款剩余天数
				}]
			};
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			/** 搜索 */
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			/** nav点击事件 */
			onClickItem(e) {
				console.log(e)
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			/** 查看详情 */
			handleDetail() {
				uni.navigateTo({
					url: "/pages/promissoryNote/promissoryNoteDetail"
				})
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.overview {
			width: 100%;
			background: #E0EDFE;
			padding: 24rpx 20rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			&>view {
				position: relative;
				width: 44%;

				.icon-box {
					position: absolute;
					top: 0;
					right: 0;
					width: 48rpx;
					height: 48rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.quantity {
					font-size: 48rpx;
					line-height: 64rpx;
					display: flex;
					align-items: baseline;
					font-weight: 700;

					i {
						font-size: 28rpx;
						margin-left: 16rpx;
						vertical-align: bottom;
					}
				}

				.num {
					color: #2c2c2c;
					font-size: 24rpx;
					margin-bottom: 32rpx;

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						border-radius: 20rpx;
						background-color: #d81e06;
						margin-right: 8rpx;
					}
				}
			}

			.collectionPayments {
				.num {
					color: #d81e06;
				}

				.quantity {
					color: #d81e06;
				}
			}

			.repayment {
				.num {
					span {
						background-color: #2c2c2c;
					}
				}
			}
		}

		.search-box {
			width: 100%;
			background-color: #fff;
		}

		.nav-card {
			width: 100%;
			background-color: #fff;

			.content {
				background-color: #F7F7F7;
				overflow: hidden;

				.content-item {
					margin: 20rpx 0;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					background: linear-gradient(to bottom left, #FAD8AB44, #fff);
					box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);

					.both-parties-to-contract {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.me,
						.you {
							display: flex;
							flex-direction: column;
							align-items: center;

							.name {
								font-weight: 700;
								font-size: 36rpx;
								line-height: 56rpx;
							}

							.statu {
								display: inline-block;
								padding: 8rpx 20rpx;
								color: #fff;
								background-color: #FA9638;
								font-size: 22rpx;
								border-radius: 4rpx;

								&.status-act {
									background-color: #7BB932;
								}
							}
						}

						.status {
							display: flex;
							flex-direction: column;
							align-items: center;

							.matter {
								font-size: 28rpx;

								span {
									margin: 0 16rpx;
									color: #d81e06;
								}
							}

							.arrow {
								width: 280rpx;
								height: 12rpx;
								margin: 8rpx 0;
								background: url("/static/image/icon-arrow.png") no-repeat;
								background-size: 100% 100%;
							}

							.state {
								color: #BC5B59;
								font-weight: 700;
								font-size: 32rpx;

								&.state-act {
									color: #7BB932;
									display: flex;
									flex-direction: column;
									align-items: center;

									i {
										font-size: 24rpx;
										color: #ef0000;
										font-weight: 400;
									}
								}
							}
						}
					}

					.mode-time {
						display: flex;
						flex-direction: column;
						font-size: 28rpx;

						&>view {
							&:first-child {
								margin-top: 32rpx;
							}

							padding: 10rpx;

							&>span:first-child {
								color: #aaa;
								margin-right: 24rpx;
							}
						}
					}

					.detail-btn {
						text-align: right;

						button {
							background-color: #7BB93224;
							color: #7BB932;
						}
					}
				}
			}
		}
	}
</style>